<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select
          v-model="searchObj.collegeId"
          placeholder="请选择学院"
          @change="collegeNameChanged()"
        >
          <el-option
            v-for="item in CollegeList"
            :key="item.collegeId"
            :label="item.collegeName"
            :value="item.collegeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchObj.courseCategories"
          placeholder="请选择课程类别"
          @change="courseCategoriesChanged()"
        >
          <el-option
            v-for="item in courseCategoriesList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.coursesName" placeholder="课程名称" />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getCourseList()"
        >查询</el-button
      >
      <el-button type="default" @click="reset()">清空</el-button>
    </el-form>

    <!-- 工具条 -->
    <div>
      <el-button type="danger" icon="el-icon-delete" @click="removeRows()"
        >批量删除</el-button
      >
    </div>
    <el-table
      :data="courses"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="课程号">
              <span>{{ props.row.coursesId }}</span>
            </el-form-item>
          
            <el-form-item label="课程名称">
              <span>{{ props.row.coursesName }}</span>
            </el-form-item>
              <el-form-item label="课程简介">
              <span>{{ props.row.introduction }}</span>
            </el-form-item>
            <el-form-item label="修读学期">
              <span>{{ props.row.termNumber }}学期</span>
            </el-form-item>
            <el-form-item label="课程学时">
              <span>{{ props.row.courseTime }}学时</span>
            </el-form-item>
            <el-form-item label="课程类别">
              <span v-if="props.row.courseCategories === 1">必修</span>
              <span v-if="props.row.courseCategories === 2">专选</span>
              <span v-if="props.row.courseCategories === 3">公选</span>
            </el-form-item>
            <el-form-item label="平时分占比">
              <span>{{ props.row.scoreProportion }}%</span>
            </el-form-item>
            <el-form-item label="学分">
              <span>{{ props.row.credit }}学分</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="课程号" prop="coursesId" sortable align="center">
      </el-table-column>
      <el-table-column label="头像" prop="headshotUrl" align="center">
        <template slot-scope="scope">
          <img
            :src="scope.row.headshotUrl"
            style="width: 100px; height: 80px"
          />
        </template>
      </el-table-column>
      <el-table-column label="课程名称" prop="coursesName" sortable align="center">
      </el-table-column>
      <el-table-column label="课程类别" prop="courseCategories" sortable align="center">
        <template slot-scope="scope">
          <p v-if="scope.row.courseCategories === 1">必修</p>
          <p v-if="scope.row.courseCategories === 2">专选</p>
          <p v-if="scope.row.courseCategories === 3">公选</p>
        </template>
      </el-table-column>
      <el-table-column label="所属学院" prop="collegeName" width="200" sortable align="center">
      </el-table-column>
      <el-table-column label="任课教师" prop="teacherName" sortable align="center">
      </el-table-column>
      <el-table-column label="学分" prop="credit" sortable align="center"> </el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <router-link :to="'/course/edit/'+scope.row.coursesId">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
      
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.coursesId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

      <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getCourseList"
    />
  </div>
</template>

<script>
import collegeApi from "@/api/college";
import courseApi from "@/api/course";
export default {
  data() {
    return {
      courseCategoriesList: [
        {
          value: "1",
          label: "必修",
        },
        {
          value: "2",
          label: "专选",
        },
        {
          value: "3",
          label: "公选",
        },
      ],
      courses: [],
      current: 1,
      limit: 10,
      total: 0,
      searchObj: {},
      multipleSelection: [],
      CollegeList: [],
      loading:true
    };
  },
  methods: {
    getCollege() {
      collegeApi.getCollegeList().then((res) => {
        this.CollegeList = res.data.page.list;
      });
    },
    getCourseList(page = 1) {
      this.current = page;
      courseApi
        .courseCondition(this.current, this.limit, this.searchObj)
        .then((res) => {
          this.courses = res.data.rows;
          this.total = res.data.total;
        });
        
    },
    removeDataById(id) {
      this.$confirm("此操作将永久删除课程信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //确定执行then方法
        var ids = [];
        ids.push(id);

        //调用接口
        courseApi.deleteCourse(ids).then((response) => {
          //提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新页面
          this.getCourseList(this.current);
        });
      });
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    removeRows() {
      this.$confirm("此操作将永久删除课程信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //确定执行then方法
        var idList = [];
        //遍历数组得到每个id值，设置到idList里面
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var obj = this.multipleSelection[i];
          var id = obj.coursesId;
          console.log(id);
          idList.push(id);
        }
        //调用接口
        courseApi.deleteCourse(idList).then((response) => {
          //提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新页面
          this.getCourseList(this.current);
        });
      });
    },
    reset() {
      this.searchObj = {};
      this.getCourseList(1);
    },
    courseCategoriesChanged() {
      console.log(this.searchObj.courseCategories)
      this.getCourseList(this.current, this.limit, this.searchObj);
    },
    collegeNameChanged() {
      this.getCourseList(this.current, this.limit, this.searchObj);
    },
  },
  created() {
    this.getCourseList(1);
    this.getCollege();
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>